<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/animation.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" type="text/css" media="screen and (min-width:961px)" href="./css/pc.css">
  <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="./css/wap.css">
</head>

<body ontouchstart>
  <div class="b-doc">
    <div class="b-bd">
      <!-- header 模块 -->
      <div class="header header-bg-black">
        <div class="header-container clear">
          <img src="images/logo.png" class="logo">
          <div class="nav-btn">
            <span class="n1"></span>
            <span class="n2"></span>
            <span class="n3"></span>
          </div>
          <div class="nav clear">
            <a class="nav-item" href="index.html">
              <span class="text">首页</span>
            </a>
            <a class="nav-item" href="news.html">
              <span class="text">新闻资讯</span>
            </a>
            <a class="nav-item" href="product.html">
              <span class="text">产品介绍</span>
            </a>
            <a class="nav-item" href="about.html">
              <span class="text">关于我们</span>
            </a>
            <a class="nav-item wap-hide on" href="personCenter.html">
              <span class="text">个人中心</span>
            </a>
            <a class="nav-item personal on" href="personCenterWap.html">
              <span class="text">个人中心</span>
            </a>
          </div>
        </div>
      </div>
      <div class="pop-nav" style="background: rgba(255, 255, 255, 0); position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 10; display: none;"></div>
      <div class="content">
        <div class="main">
          <div class="breadcrumb">
            <div class="breadcrumb-main clear">
              <div class="breadcrumb-hd">您的位置：</div>
              <ul class="breadcrumb-bd clear">
                <li class="breadcrumb-item">
                  <a href="index.html">首页</a>
                </li>
                <li class="breadcrumb-item">
                  <a href="personCenter.html">个人中心</a>
                </li>
                <li class="breadcrumb-item">
                  <a href="security.html">安全设置</a>
                </li>
                <li class="breadcrumb-item cur">实名认证</li>
              </ul>
            </div>
          </div>
          <div class="center clear">
            <div class="center-nav">
              <div class="center-nav-con">
                <div class="item cur">
                  <a href="personCenter.html">个人中心</a>
                </div>
                <div class="item">
                  <a href="personalData.html">个人资料</a>
                </div>
                <div class="item">
                  <a href="accountManagement.html">账户管理</a>
                </div>
                <div class="item">
                  <a href="MyPromotion.html">我的推广</a>
                </div>
                <div class="item">
                  <a href="MyEarnings.html">我的收益</a>
                </div>
                <div class="item">
                  <a href="ShopGains.html">店铺收益</a>
                </div>
                <div class="item on">
                  <a href="security.html">安全设置</a>
                </div>
                <div class="item">
                  <a href="message.html">站内信</a>
                </div>
              </div>
            </div>
            <div class="center-main">
              <div class="title clear">
                <span class="name">安全设置</span>
              </div>
              <div class="center-content layui-bg-write border-1px">
                <div class="sm-title">
                  <span class="name">实名认证</span>
                </div>
                <div class="layui-form center-form">
                  <div class="layui-form-item">
                    <label class="layui-form-label">
                      <span class="red">*</span>真实姓名：</label>
                    <div class="layui-input-inline">
                      <input type="password" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">
                      <span class="red">*</span>身份证号码：</label>
                    <div class="layui-input-inline">
                      <input type="password" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">
                      <span class="red">*</span>上传正反面及手持身份证：</label>
                    <div class="layui-input-inline">
                      <div class="upload">
                        <div class="btn-wrapper">
                          <button class="layui-btn layui-btn-sm upload-btn" id="upload">上传</button>
                        </div>
                        <ul class="upload-list clear" id="upload-list">
                          <li>
                            <img src="images/person.png" alt="">
                            <span class="del">
                              <i class="layui-icon">&#xe640;</i>
                            </span>
                          </li>
                          <li>
                            <img src="images/person.png" alt="">
                            <span class="del">
                              <i class="layui-icon">&#xe640;</i>
                            </span>
                          </li>
                          <li>
                            <img src="images/person.png" alt="">
                            <span class="del">
                              <i class="layui-icon">&#xe640;</i>
                            </span>
                          </li>
                        </ul>
                        <ul class="photo-init clear">
                          <li>(正面)</li>
                          <li>(反面)</li>
                          <li>(手持身份证)</li>
                        </ul>
                        <div class="example">示例:</div>
                        <ul class="example-list clear" id="example-list">
                          <li>
                            <img src="images/example.jpg" alt="" layer-index="0">
                          </li>
                          <li>
                            <img src="images/example2.jpg" alt="" layer-index="1">
                          </li>
                          <li>
                            <img src="images/example3.jpg" alt="" layer-index="2">
                          </li>
                        </ul>
                      </div>

                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block wap-btn-group">
                      <a class="layui-btn layui-btn-normal">确定</a>
                      <a class="layui-btn layui-btn-primary" href="security.html">取消</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer clear">
    <div class="ft-content">
      <div class="ft-logo">
        <img src="images/logo.png" alt="">
      </div>
      <div class="ft-site">
        <h3>深圳市宝生和鸣生物科技有限公司</h3>
        <p>联系电话：4000031909</p>
        <p>公司地址：深圳市宝安区新安海天路卓越时代广场A座1905-1906</p>
        <p>备案信息：<a href="http://www.miitbeian.gov.cn " style="  color: #999;">粤ICP备17164065号-1</a></p>
      </div>
      <div class="ft-share">
        <div>
          <a href="#">
            <img src="images/ft-1.png" alt="">
            <p>微信公众号</p>
          </a>
        </div>
        <div>
          <a href="#">
            <img src="images/ft-2.png" alt="">
            <p>微博</p>
          </a>
        </div>
        <div>
          <a href="#">
            <img src="images/ft-3.png" alt="">
            <p>QQ客服</p>
          </a>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/jquery-1.8.3.min.js"></script>
  <script src="./layui/layui.js"></script>
  <script src="./js/fastclick.js"></script>
  <script src="./js/common.js"></script>
  <script>
    layui.use(['form', 'layer', 'upload'], function () {
      var form = layui.form,
        layer = layui.layer,
        upload = layui.upload;

      // 删除
      $(document).on('click', '.del', function () {
        layer.confirm('您确定要删除吗？', { icon: 0, title: '删除提示' }, function (index) {
          layer.msg('删除成功', { time: 1000 });
          layer.close(index);
        });
      });

      upload.render({
        elem: '#upload'
        , done: function (res, index, upload) {
          //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
        }
      })

      layer.photos({
        photos: '#upload-list'
        , closeBtn: 1
        , anim: 0
      });
      layer.photos({
        photos: '#example-list'
        , closeBtn: 1
        , anim: 0
      });
    })
  </script>
</body>

</html>